<template>
  <div>
    <section>            
        <el-table :data="tableData"  style="width: 90%" align='center'>
            <el-table-column type="index" label="序号" width="60" align='center' min-width='50'></el-table-column>
            <el-table-column prop="subjectName" label="学科" width="200" align='center' min-width='150'>  </el-table-column>
            <el-table-column prop="teachers" label="教师" width="400" align='center' min-width='200'> </el-table-column>
            <el-table-column label="操作" align='center' width="200" min-width='100' fixed="right">
                <template slot-scope="scope">               
                    <el-button  type="primary" size="medium" @click="handleSaveTeachers(scope.row)">设置教师</el-button>
                </template>
            </el-table-column>
        </el-table>
    </section>

    <el-dialog title="设置教师" :visible.sync="teacherVisible">
        <el-row :gutter='5' style="border-bottom: 1px groove hsla(0,0%,76%,.24);line-height: 55px;font-size: 14px;">
            <el-col :span="24">
                <el-col :span="7">
                    <el-input style="width:150px;" placeholder="请输入教师姓名..." v-model="classesTeacherForm.userName" clearable ></el-input>
                </el-col>
                <el-col :span="3">
                    <el-button type="primary" @click="getUnselectedTeacherList()">搜索</el-button>
                </el-col>
            </el-col>
        </el-row>
        <section style="width:100%;height:400px;float:left;">  
        <div style="width:50%;height:360px;float:left;">
            <h3>待选人员({{unselectTeacherList.length}})</h3>
            <el-table :data="unselectTeacherList"  style="width: 95%;border:2px solid #33CCFF;" height="300" @current-change="set">
                <el-table-column prop="teacherName" label="教师姓名" width="90" align='center'></el-table-column>
                <el-table-column prop="phaseName" label="学段" width="80" align='center' ></el-table-column>
                <el-table-column prop="subjectName" label="学科" width="100" align='center' ></el-table-column>
            </el-table>
        </div>
        <div style="width:50%;height:500px;float:right;">
            <h3>已选人员({{selectTeacherList.length}})</h3>
            <el-table :data="selectTeacherList" style="width: 95%;border:2px solid #33CCFF;" height="300" @current-change="cancel">
                 <el-table-column prop="teacherName" label="教师姓名" width="90" align='center'></el-table-column>
                <el-table-column prop="phaseName" label="学段" width="80" align='center' ></el-table-column>
                <el-table-column prop="subjectName" label="学科" width="100" align='center' ></el-table-column>
            </el-table>
        </div>
        </section>
        <div slot="footer" class="dialog-footer">
            <el-button @click="teacherVisible = false">取 消</el-button>
            <el-button type="primary" @click="sureSet()">确 定</el-button>
        </div>
         
    </el-dialog>
  </div>
</template>
<script>
import util from '../../common/js/util'
import { SysApi } from '@/api/index'
    
export default {
    data(){
        return{
            tableData:[],
            schoolId: JSON.parse(sessionStorage.getItem("schoolId")),
            schoolName: JSON.parse(sessionStorage.getItem("schoolName")),
            phaseId: this.$route.params.phaseId,
            classesId: this.$route.params.classesId,
            classesName: this.$route.params.classesName,
            subjectId:'',
            classesTeacherForm:{
                phaseId:'',
                subjectId:'',
                userName:'',
                schoolId: JSON.parse(sessionStorage.getItem("schoolId")),
                classesId: this.$route.params.classesId,
                chooseId:'',
                teacherIds:[]
            },
            phaseCourseList:[],
            courseList:[],
            teacherVisible:false,
            classesTitle:'',
            unselectTeacherList:[],
            selectTeacherList:[],
            
        }
    },
    created(){
 
        this.schoolId = JSON.parse(sessionStorage.getItem("schoolId"));
        this.schoolName = JSON.parse(sessionStorage.getItem("schoolName"));
        this.phaseId = this.$route.params.phaseId;
        this.classesId = this.$route.params.classesId;
        this.classesName = this.$route.params.classesName;

        this.getClassesSubjectList();

    },
    methods:{

        getClassesSubjectList(){
            let params = {
                    phaseId: this.phaseId,
					classesId: this.classesId
				};
				SysApi.getClassesSubjectList(params, res => {
					if (res!=null)
					{
						this.tableData = res;
					}
				}, (errorType, error) => {
				})
        },
         //设置教师前
        handleSaveTeachers(row){
            this.teacherVisible = true;
            this.unselectTeacherList = [];
            this.selectTeacherList = [];
            this.subjectId = row.subjectId;
            this.classesTeacherForm.userName = "";
            this.getTeacherList()
        },
        // 获取教师列表
        getTeacherList(){
            this.selectTeacherList = [];
            this.getSelectedTeacherList();
            this.getUnselectedTeacherList();
            
        },
        // 获取班级学科教师可选择列表
        getUnselectedTeacherList(){
            this.unselectTeacherList = [];
            var selectids = "";
            for(let i = 0;i<this.selectTeacherList.length;i++){
                if (selectids=="")
                {
                    selectids = this.selectTeacherList[i].teacherId + "";
                }
                else
                {
                    selectids = selectids + "," + this.selectTeacherList[i].teacherId;
                }
            }
             let params = {
                    schoolId: this.schoolId,
                    phaseId: this.phaseId,
                    classesId: this.classesId,
                    subjectId: this.subjectId,
                    userName: this.classesTeacherForm.userName,
                    selectids: selectids,
                };
                
            SysApi.getUnselectedTeacherList(params, res => {
					if (res!=null)
					{
                        this.unselectTeacherList = res;
					}
				}, (errorType, error) => {
			})
 
        },
        // 获取班级学科已任教教师列表
        getSelectedTeacherList(){
            let params = {
                    schoolId: this.schoolId,
                    phaseId: this.phaseId,
                    classesId: this.classesId,
                    subjectId: this.subjectId,
				};
            SysApi.getSelectedTeacherList(params, res => {
					if (res!=null)
					{
						this.selectTeacherList = res;
					}
				}, (errorType, error) => {
			})
    
        },
        //设置教师
        set(val){
            //console.log(val)
            for(let i = 0;i<this.unselectTeacherList.length;i++){
                if(this.unselectTeacherList[i] == val){
                    this.selectTeacherList.push(this.unselectTeacherList[i])
                    this.unselectTeacherList.splice(i,1);
                    break;
                }
            }
        },
        //取消设置
        cancel(val){
            for(let i = 0;i<this.selectTeacherList.length;i++){
                if(this.selectTeacherList[i] == val){
                    this.unselectTeacherList.push(this.selectTeacherList[i])
                    this.selectTeacherList.splice(i,1);       
                    break;
                }
            }
        },
        sureSet(){

            let ids = [];
            for(let i = 0;i<this.selectTeacherList.length;i++){
                ids.push(this.selectTeacherList[i].teacherId)
            }

            let params = {
                    classesId: this.classesId,
                    subjectId: this.subjectId,
                    teacherIds: ids,
                };
           
            SysApi.saveSubjectTeacher(params, res => {

                    this.$message({
                    type: 'success',
                    message: '设置成功!'
                });
                
                this.getClassesSubjectList();
                this.teacherVisible = false;
                   
				}, (errorType, error) => {
                    
			})

        }
    }
};
</script>
<style lang="scss" scoped>
@import "~scss_vars";
.el-transfer{
    margin: 20px 0 0 10%
}
.table_content{
    width: 90%;
    height: auto;
    margin-top: 20px;
    margin: 0 auto;
    header{
        width: 100%;
        height: 50px;
        padding-top: 50px;
        padding-bottom: 50px;
        .title{
            width: auto;
            height: 23px;
            line-height: 23px;
            border-left: 5px solid $color-primary;
            padding-left: 5px;
            display: inline-block;
            margin-top: 12px;
            h3{
                margin: 0;
            }
        }
        button{
            float: right;
            margin-right: 5%;
        }
    }
}
</style>
<style>
.el-table >.el-table__fixed {
    height: 100% !important; 
  }
.el-table >.el-table__fixed-right {
    height: 100% !important; 
  }
.el-table--scrollable-x .el-table__body-wrapper {
    z-index: 1;
  }
</style>

